<template>
  <div class="con18">
    <div class="c_item">
      <h2>全局组件</h2>
      <card></card>
    </div>
    <div class="c_item">
      <h2>递归组件</h2>
      <chid18 :infoList="infoList"></chid18>
    </div>
    <div class="c_item">
      <h2>动态组件</h2>
      <a-menu
        v-model:selectedKeys="current"
        mode="horizontal"
        @click="handleClick"
      >
        <a-menu-item key="A">
          <template #icon>
            <mail-outlined />
          </template>
          A
        </a-menu-item>
        <a-menu-item key="B">
          <template #icon>
            <appstore-outlined />
          </template>
          B
        </a-menu-item>
      </a-menu>
      <component :is="now" style="margin-top: 10px"></component>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, type Component, shallowRef } from "vue";
import chid18 from "./demo18_child.vue";
import A from "./demo18_a.vue";
import B from "./demo18_b.vue";
import type { MenuInfo } from "ant-design-vue/lib/menu/src/interface";

interface info {
  name: string;
  no: string;
  icon: string;
  children?: Array<info>;
}

const infoList = reactive<Array<info>>([
  {
    name: "A",
    no: "1",
    icon: "AndroidOutlined",
    children: [
      { name: "a_1", no: "1-1", icon: "AppleOutlined" },
      {
        name: "a_2",
        no: "1-2",
        icon: "GithubOutlined",
        children: [{ name: "a_2_1", no: "1-2-1", icon: "DingdingOutlined" }],
      },
    ],
  },
  { name: "B", no: "2", icon: "WindowsOutlined" },
  {
    name: "C",
    no: "3",
    icon: "IeOutlined",
    children: [{ name: "c", no: "3-1", icon: "ChromeOutlined" }],
  },
]);

const current = ref<string[]>(["A"]);
const now = shallowRef<Component>(A);

const handleClick = (e: MenuInfo) => {
  if (e.key == "A") {
    now.value = A;
  } else {
    now.value = B;
  }
  current.value = <Array<string>>e.keyPath;
};
</script>

<style scoped lang="scss">
.con18 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .c_item {
    margin-right: 40px;
    min-width: 240px;
    margin-bottom: 20px;
  }
}
</style>
